<template>
	<view>
		<view class="content">
		    <form>
		      <!-- 表单内容 -->
		      <view class="form-item">
		        <text class="label">收货人</text>
		        <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
		      </view>
		      <view class="form-item">
		        <text class="label">手机号码</text>
		        <input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" />
		      </view>
		      <view class="form-item">
		        <text class="label">所在地区</text>
		        <picker class="picker" mode="region" @change="onRegionChange">
		          <view v-if="form.cityCode">{{form.fullLocation}}</view>
		          <view v-else class="placeholder">请选择省/市/区(县)</view>
		        </picker>
		      </view>
		      <view class="form-item">
		        <text class="label">详细地址</text>
		        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
		      </view>
		      <view class="form-item">
		        <label class="label">设为默认地址</label>
		        <switch class="switch" color="#27ba9b" :checked="form.isDefault" @change="onSwitchChange" />
		      </view>
		    </form>
		  </view>
		  <!-- 提交按钮 -->
		  <button class="button" @click="onSubmit">保存并使用</button>
	</view>
</template>

<script>
	import { 
		addMemberAddress,
		getMemberAddressDetail,
		updateMemberAddressDetail
	} from '@/services/my.js'
	export default {
		data() {
			return {
				form: {
					receiver: '', // 收货人
					contact: '', // 联系方式
					fullLocation: '', // 省市区(前端展示)
					provinceCode: '', // 省份编码(后端参数)
					cityCode: '', // 城市编码(后端参数)
					countyCode: '', // 区/县编码(后端参数)
					address: '', // 详细地址
					isDefault: 0, // 默认地址，1为是，0为否
				},
				id: '',
			}
		},
		onLoad(option) {
			this.id = option.id
			uni.setNavigationBarTitle({ title: option.id ? '修改地址' : '新建地址' })
			if(option.id){
				this.getAddressDetail(option.id)
			}
		},
		methods: {
			// 获取详情地址
			async getAddressDetail(id){
				let res = await getMemberAddressDetail(id)
				if(res?.code == 1){
					this.form = res.result
				}
			},
			// 保存
			async onSubmit (){
				if(this.id){
					let res = await updateMemberAddressDetail(this.id,this.form)
					if(res?.code == 1){
						// 成功提示
						uni.showToast({ icon: 'success', title: '修改成功' })
						// 返回上一页
						  setTimeout(() => {
						    uni.navigateBack()
						  }, 600)
					}
				}else{
					let res = await addMemberAddress(this.form)
					if(res?.code == 1){
						// 成功提示
						uni.showToast({ icon: 'success', title: '添加成功' })
						// 返回上一页
						  setTimeout(() => {
						    uni.navigateBack()
						  }, 600)
					}else{
						uni.showToast({ icon: 'error', title: '添加失败' })
					}
				}
			},
			// 是否默认地址
			onSwitchChange(e){
				this.form.isDefault = e.detail.value ? 1 : 0
			},
			// 省市区
			onRegionChange(e){
				// 省市区(前端展示)
				this.form.fullLocation = e.detail.value.join(' ')
				// 省市区(后端参数)
				const [provinceCode, cityCode, countyCode] = e.detail.code
				// 合并数据
				Object.assign(this.form, { provinceCode, cityCode, countyCode })
			},
		}
	}
</script>

<style lang="scss" scoped>
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>